<template>
  <Wrapper>
    <el-row :gutter="30">
      <el-col :lg="6">
        <el-card shadow="never" header="常用">
          <QRcode value="这是常用的二维码" />
        </el-card>
      </el-col>
      <el-col :lg="6">
        <el-card shadow="never" header="带Logo">
          <QRcode
            value="logo"
            logo="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
          />
        </el-card>
      </el-col>
      <el-col :lg="6">
        <el-card shadow="never" header="自定义颜色大小">
          <QRcode
            value="custom color and size"
            size="100"
            :colorDark="primaryColor"
            :colorLight="getCssPropertyValue('--el-color-white')"
          />
        </el-card>
      </el-col>
      <el-col :lg="6">
        <el-card shadow="never" header="动态">
          <QRcode size="100" :value="value" />
          <el-input v-model="value" placeholder="请输入" />
        </el-card>
      </el-col>
    </el-row>
  </Wrapper>
</template>

<script setup>
import { getCssPropertyValue } from '@/app/style'
import useConfigStore from '@/store/modules/config'
import QRcode from '@/components/qrcode'

const primaryColor = computed(() => useConfigStore().globalConfig.primaryColor)

const value = ref('动态二维码')
</script>

<style lang="scss" scoped>
.el-col {
  margin-bottom: 30px;
}
</style>
